<template>
    <div class="app-container x-container" v-loading="loading">
        <el-form ref="ruleFormRef" inline :model="ruleForm" :rules="rules" label-width="120px" class="xform">
            <el-form-item label="游戏标题" prop="game_name">
                <el-input class="w240" v-model="ruleForm.game_name" placeholder="请输入游戏标题" maxlength="50" clearable />
            </el-form-item>
            <el-form-item label="资源ID" prop="short">
                <el-input class="w240" v-model="ruleForm.short" placeholder="请输入资源ID" maxlength="10" clearable>
                    <template #append>
                        <el-button :disabled="ruleForm.short ? false : true" @click="handleSearch">查询</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="游戏关键字" prop="keywords_id">
                <el-select class="w240" filterable :filter-method="filterFun" v-model="ruleForm.keywords_id"
                    placeholder="请选择关键字" clearable>
                    <el-option :label="ietm.name" :value="ietm.id" v-for="(ietm, value) in filteredOptions" />
                </el-select>
            </el-form-item>
            <el-form-item label="语言类型" prop="language">
                <el-select class="w240" v-model="ruleForm.language" placeholder="请选择语言类型" clearable>
                    <el-option :label="key" :value="value" v-for="(key, value) in publicParams.LANGUAGE_TYPE" />
                </el-select>
            </el-form-item>
            <el-form-item label="热度" prop="popular">
                <el-input class="w240" v-model="ruleForm.popular" placeholder="请输入热度" maxlength="50" clearable />
            </el-form-item>
            <el-form-item label="安卓包名" prop="android_package_name">
                <el-input class="w240" disabled v-model="ruleForm.android_package_name" placeholder="请输入安卓包名"
                    clearable />
            </el-form-item>
            <el-form-item label="资源包地址" prop="android_url">
                <el-input class="w240" disabled v-model="ruleForm.android_url" placeholder="请输入资源包地址" clearable />
            </el-form-item>
            <el-form-item label="资源大小" prop="game_size">
                <el-input class="w240" type="number" v-model="ruleForm.game_size" placeholder="请输入资源大小"
                    oninput="this.value = this.value.slice(0, 8)" clearable />
            </el-form-item>
            <el-form-item label="版本号" prop="android_version">
                <el-input class="w240" v-model="ruleForm.android_version" placeholder="请输入版本号" clearable />
            </el-form-item>
            <el-row>
                <el-col :span="24" class="flex">
                    <el-form-item class="flex1" label="游戏描述" prop="remark">
                        <el-input type="textarea" v-model="ruleForm.remark" placeholder="请输入游戏描述" autosize clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="flex">
                    <el-form-item class="flex1" label="SEO标题" prop="page_title">
                        <el-input class="w100" v-model="ruleForm.page_title" placeholder="请输入SEO标题" clearable
                            maxlength="500" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="flex">
                    <el-form-item class="flex1" label="SEO关键字" prop="page_keywords">
                        <el-input class="w100" v-model="ruleForm.page_keywords" placeholder="请输入SEO关键字" clearable
                            maxlength="500" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="flex">
                    <el-form-item class="flex1" label="SEO描述" prop="page_description">
                        <el-input type="textarea" class="w100" v-model="ruleForm.page_description"
                            placeholder="请输入SEO描述" clearable maxlength="500" autosize />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="游戏介绍" prop="description">
                <vue-ueditor-wrap v-model="ruleForm.description" editor-id="editor" />
            </el-form-item>
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-form-item label="游戏图标(380*214)" prop="game_icon">
                        <FileUpload v-model="ruleForm.game_icon" :limit="1"></FileUpload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="游戏截图(308*351)" prop="screen_image">
                        <FileUpload v-model="ruleForm.screen_image" :limit="6"></FileUpload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-form-item label="图片类型" prop="is_vertical">
                        <el-select class="w240" v-model="ruleForm.is_vertical" placeholder="请选图片类型" clearable>
                            <el-option :value="value" :label="key" v-for="(key, value) in publicParams.IMG_TYPE" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="发布时间" prop="release_time">
                <el-date-picker format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm"
                    :disabled-date="disabledBeforeToday" v-model="ruleForm.release_time" type="datetime"
                    placeholder="请选择" />
            </el-form-item>
            <el-form-item prop="is_recommend">
                <el-checkbox :true-value="1" :false-value="0" v-model="ruleForm.is_recommend"
                    name="type">首页推荐</el-checkbox>
            </el-form-item>
            <el-form-item prop="is_timing">
                <el-checkbox :true-value="1" :false-value="0" @change="timingChange" v-model="ruleForm.is_timing"
                    name="type">定时发布</el-checkbox>
            </el-form-item>
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-form-item label="是否展示弹窗" prop="is_pop">
                        <el-radio-group v-model="ruleForm.is_pop">
                            <el-radio :value="1">是</el-radio>
                            <el-radio :value="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="ruleForm.is_pop">
                    <el-form-item label="弹窗标题" prop="pop_title">
                        <el-input class="w100" v-model="ruleForm.pop_title" placeholder="请输入资源包地址" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="ruleForm.is_pop">
                    <el-form-item label="弹窗链接" prop="pop_url">
                        <el-input class="w100" v-model="ruleForm.pop_url" placeholder="请输入资源包地址" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="ruleForm.is_pop">
                    <el-form-item label="弹窗截图(351*153)" prop="pop_image">
                        <FileUpload v-model="ruleForm.pop_image" :limit="1"></FileUpload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col class="flex-center-align" :span="24">
                    <el-button @click="cancelForm(ruleFormRef)">取消</el-button>
                    <!-- <el-button @click="resetForm(ruleFormRef)">重置</el-button> -->
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef, 1)">提交并发布</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>

</template>

<script setup>
import { addGame, editGame, getGameDetail } from '@/api/game'
import { getApkDetail } from '@/api/apk';
import { allKeyword } from '@/api/keywords'
import { reactive, ref, toRaw, inject, } from 'vue'
import VueUeditorWrap from '@/components/VueUeditorWrap.vue'

import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const publicParams = inject('publicParams')
const used = inject('used');

const ruleFormRef = ref()
const ruleForm = reactive(
    {
        game_name: '',
        popular: '',//热度
        short: '',
        language: '',//语言
        keywords_id: '',//游戏关键词
        page_title: '',//SEO标题
        page_keywords: '',//SEO关键字
        page_description: '',//SEO描述
        android_package_name: '',//安卓包名
        android_url: '',//资源包地址
        game_size: null,//资源大小
        android_version: '',//版本号
        remark: '',
        description: '',
        game_icon: '',//游戏图标
        screen_image: '',//游戏截图
        release_time: '',//发布时间
        is_vertical: '',//图片类型
        is_recommend: 0,//首页推荐
        is_timing: '0',//定时发布
        desc: '',
        md5: '',
        is_pop: '',//是否展示弹窗
        pop_title: '',//弹窗标题
        pop_url: '',//弹窗链接
        pop_image: '',//弹窗图片
        rLoading: 1
    }
)

const rules = reactive(
    {
        game_name: [
            { required: true, message: '请输入游戏名称', trigger: 'blur' },
        ],
        short: [
            { required: true, message: '请输入资源ID', trigger: 'blur' },
        ],
        language: [
            { required: true, message: '请选择语言类型', trigger: 'change' },
        ],
        type: [
            { required: true, message: '请选择游戏类型', trigger: 'change' },
        ],
        keywords_id: [
            { required: true, message: '请选择游戏关键词', trigger: 'change' },
        ],
        page_title: [
            { required: true, message: '请输入SEO标题', trigger: 'blur' },
        ],
        page_keywords: [
            { required: true, message: '请输入SEO关键字', trigger: 'blur' },
        ],
        page_description: [
            { required: true, message: '请输入SEO描述', trigger: 'blur' },
        ],
        android_package_name: [
            { required: true, message: '请输入资源ID并查询', trigger: 'change' },
        ],
        android_url: [
            { required: true, message: '请输入资源ID并查询', trigger: 'change' },
        ],
        game_size: [
            { required: true, message: '请输入资源大小', trigger: 'change' }
        ],
        android_version: [
            { required: true, message: '请输入版本号', trigger: 'change' },
        ],
        game_icon: [
            { required: true, message: '请上传游戏图标', trigger: 'change' },
        ],
        screen_image: [
            { required: true, message: '请上传游戏截图', trigger: 'change' },
        ],
        is_vertical: [
            { required: true, message: '请选择图片类型', trigger: 'change', },
        ],
        release_time: [
            { required: false, message: '请选择发布时间', trigger: 'change', },
        ],
        //
        is_pop: [
            { required: true, message: '请选择是否展示弹窗', trigger: 'change', },
        ],
        pop_title: [
            { required: true, message: '请输入弹窗标题', trigger: 'blur' },
        ],
        pop_url: [
            { required: true, message: '请输入弹窗链接', trigger: 'blur' },
        ],
        pop_image: [
            { required: true, message: '请上传弹窗图片', trigger: 'change' },
        ]
    }
)


/*查询安卓信息 */
const handleSearch = () => {
    let params = {
        id: ruleForm.short,
        rLoading: 1
    }
    getApkDetail(params).then(res => {
        if (res.code == 1) {
            let data = res.data;
            ruleForm.android_package_name = data.package_name;
            ruleForm.android_url = data.url;
            ruleForm.game_size = data.game_size;
            ruleForm.android_version = data.version;
            ruleForm.md5 = data.md5;
        } else {
            used.msgError(res.message)
        }
    })
}


//选择是否确认定时发布
const timingChange = (type) => {
    if (type) {
        rules.release_time[0].required = true;
    } else {
        rules.release_time[0].required = false;
    }
}

//是否展示弹窗
const isPopChange = (type) => {
    if (type) {
        rules.pop_title[0].required = true;
        rules.pop_url[0].required = true;
        rules.pop_image[0].required = true;
    } else {
        rules.pop_title[0].required = false;
        rules.pop_url[0].required = false;
        rules.pop_image[0].required = false;
    }
}

//时间选择器禁止选择今天之前的日期
const disabledBeforeToday = (date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0); // 确保比较的是当天的开始时间
    return date < today;
};
/* 获取详情数据 */
let loading = ref(false);
const getDetail = async () => {
    const { data } = await getGameDetail({ id: route.query.id })
    Object.assign(ruleForm, data)
    ruleForm.is_vertical += '';
    ruleForm.language += '';
    timingChange(ruleForm.is_timing)
    getallKeyword();
    loading.value = false;
}
let id = route.query.id;
if (id) {
    loading.value = true;
    getDetail()
} else {
    getallKeyword()
}
//提交
const submitForm = async (formEl, type) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let params = { ...ruleForm };
            if (Array.isArray(params.screen_image)) {
                params.screen_image = params.screen_image.join(',');
            }
            type == 1 ? params.status = 1 : '';
            let res = id ? await editGame(params) : await addGame(params);
            if (res.code == 1) {
                used.msgSuccess(res.message);
                router.go(-1)
            } else {
                used.msgError(res.message);
            }
        } else {
            used.msgError(fields[Object.keys(fields)[0]][0].message);
        }
    })
}
//取消
const cancelForm = (formEl) => {
    router.go(-1)
}
//重置
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
//


//获取关键词列表
let gjcListAll = ref([]);//全部
let gjcListSt = ref([]);//前50条
let filteredOptions = ref([]);//实际选择的数组

function getallKeyword() {
    let kId = ruleForm.keywords_id;
    allKeyword().then(res => {
        let list = res.data;
        gjcListAll.value = list;
        gjcListSt.value = list.slice(0, 50);
        filteredOptions.value = [...gjcListSt.value];
        //查看当前选择列表中是否包含当前选择 没有去全部中查询 并添加到选择列表中

        if (!gjcListSt.value.some(item => item.id == kId)) {
            let item = gjcListAll.value.find(item => item.id == kId);
            if (item) {
                gjcListSt.value.push(item);
                filteredOptions.value.push(item);
            }
        }
    })
}


// 多选过滤方法
const filterFun = (query) => {
    if (query === '') {
        filteredOptions.value = [...gjcListSt.value];
    } else {
        filteredOptions.value = gjcListAll.value.filter(item =>
            item.name.includes(query)
        )
    }
}
</script>

<style scoped lang="scss">
.x-container {
    position: relative;
    padding: 20px;
    background-color: #fff;
}
</style>
